<template>
  <baseCard
    title="基础设施监控"
    :height="height"
    :contentStyle="{ paddingTop: '0', paddingRight: '0.08rem' }"
  >
    <template #right>
      <VptSelectBlock
        :defaultSelect="defaultTabs"
        :tabList="tabOption"
        @changeTab="changeTab"
        :fontSize="'0.14rem'"
        :height="'0.24rem'"
      ></VptSelectBlock>
      <vptSelect
        class="es-select-app"
        :label="'选择IP'"
        :width="1.6"
        :options="options"
        :value="defaultValue"
        @change-tab="onChangeTab"
        :allow-search="true"
      ></vptSelect>
    </template>
    <div class="template">
      <MonitoringPanel
        :chartType="chartType"
        :monitoringData="monitoringData"
      ></MonitoringPanel>
    </div>
  </baseCard>
</template>

<script setup>
import { computed, ref } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";
import vptSelect from "@/components/form/vpt-select/index.vue";
import MonitoringPanel from "@/components/vpt-monitoring-panel/index.vue";

const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "01" },
  defaultValue: { type: String, default: "01" },
  options: { type: Array, default: [] },
  chartType: { type: String, default: "init" },
  monitoringData: {
    type: Array,
    default: () => [],
  },
});

const tabOption = [
  { id: "01", name: "ECS" },
  { id: "02", name: "DCS" },
  { id: "03", name: "ELB" },
  { id: "04", name: "Gauss" },
  // { id: "05", name: "DDS" },
  // { id: "06", name: "SFS" },
  // { id: "07", name: "OBS" },
  // { id: "08", name: "RomaConnect" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const onChangeTab = (value) => {
  emit("onChangeSelect", value);
};
const emit = defineEmits(["changeTab", "onChangeSelect"]);
</script>

<style lang="less" scoped>
.es-select-app {
  margin-left: 0.2rem;
}
</style>